<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>支付</title>
    <meta name="keywords" content="支付" />
    <meta name="description" content="支付" />
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width,viewport-fit=cover">
    <link th:href="@{/shoppingApi/css/public.css}" rel="stylesheet">
    <link th:href="@{/shoppingApi/css/weui.min.css}" rel="stylesheet">
    <link th:href="@{/shoppingApi/css/jquery-weui.min.css}" rel="stylesheet">
    <link th:href="@{/shoppingApi/css/pay.css}" rel="stylesheet">
</head>
<body>
<div class="main pay">
    <div class="main_con c323232">
        <!--<p class="order_title pl15 pr15 bgfff ft17 c323232 ftc flex flex-ac">-->
        <!--<img class="back" src="./images/back.png">-->
        <!--<span class="it1">在线支付</span>-->
        <!--</p>-->
        <p class="heigth45 pl15 pr15 shop flex bgfff flex-ac">
            <img th:src="@{/shoppingApi/images/carttip.png}">
            <span class="c323232 ml5 it1">
                 <img class="shopimg db" th:src="@{/shoppingApi/images/shopimg.png}">
                <!--<span class="ft14 db shoptitle">新零售微店</span>-->
                <!--<span class="ft7 db shopeng">YUNCHUANGSHEQU</span>-->
            </span>
            <span class="ft15 cf70029 fr">
                <span class="c323232">总需支付</span>
                <span class="ft15"><i>￥</i><i class="real-pay"  th:if="${orderPay!=null}" th:text="${orderPay.order.realPay+orderPay.order.freight}"></i></span>
                <input type="hidden" class="orderNo" name="orderNo" th:if="${orderPay!=null}" th:value="${orderPay.order.orderNo}"/>
                <input type="hidden" class="orderId" name="orderId"  th:if="${orderPay!=null}" th:value="${orderPay.order.orderId}"/>
            </span>
        </p>
        <div class="mt15 pl15 pr15 pt15 card bgfff">
            <ul class="overflow">
                <!--消费积分支付-->
                <li class="flex flex-pj flex-ac mb15 cost-inter ">
                    <div>
                        <p>
                            <span class="ft17 c000" th:if="${orderPay!=null}" th:text="${'使用'+orderPay.WebConfig.finacename4}"></span>
                            <span class="ft10 cf70029">(抵扣)</span>
                        </p>
                        <!--<p th:if="${orderPay.costinter<=0}" class="ft10 c000 mt5"th:text="${'(当前您共有￥'+orderPay.costinter+orderPay.WebConfig.finaceName4+')'}">(当前您共有￥0.00)</p>-->
                        <p class="ft10 c000 mt5" >
                            <span>(当前您共有￥</span><span class="costinter-sum" th:if="${orderPay!=null}" th:text="${#numbers.formatDecimal(orderPay.costinter,1,2)}"></span><span  th:if="${orderPay!=null}" th:text="${orderPay.WebConfig.finacename4}"></span><span>)</span>
                        </p>
                    </div>
                    <div  class="costinter-pay">
                        <!--消费积分为0-->
                        <!--<span class="ft17 cf70029 mr10"  th:if="${orderPay.costinter<=0}"><i>-￥</i><i th:id="${'costinter'+orderPay.order.orderId}"></i>0.00</span>-->
                        <span class="ft17 cf70029 mr10" ><i>-￥</i><i class="costinter-pay-total">0.00</i></span>
                        <!--消费积分大于支付金额-->
                        <!--<span class="ft17 cf70029 mr10"  th:if="${orderPay.costinter-(orderPay.order.realPay+orderPay.order.freight)>=0&&orderPay.costinter>0}"><i>-￥</i><i class="costinter-pay-sum" th:id="${'costinter'+orderPay.order.orderId}" th:text="${#numbers.formatDecimal(orderPay.order.realPay+orderPay.order.freight, 1, 2)}"></i></span>-->
                        <!--消费积分小于支付金额-->
                        <!--<span class="ft17 cf70029 mr10"  th:if="${orderPay.costinter-(orderPay.order.realPay+orderPay.order.freight)<0&&orderPay.costinter>0}"><i>-￥</i><i th:id="${'costinter'+orderPay.order.orderId}" th:text="${#numbers.formatDecimal(orderPay.costinter, 1, 2)}"></i></span>-->
                        <!--消费积分大于支付金额-->
                        <!--<input class="costinter-input" type="checkbox" name="let" th:if="${orderPay.costinter>0}" checked="checked" >-->
                        <input class="costinter-input costinter-box" type="checkbox" name="let" >
                        <!--消费积分小于支付金额-->
                        <!--<input type="checkbox" name="let" th:if="${orderPay.costinter<=0}">-->
                        <!--<input type="checkbox" name="let"th:if="${(orderPay.costinter-orderPay.order.realPay-orderPay.order.freight>0}" checked="checked">-->
                    </div>
                </li>
                <!--积分支付-->
                <li class="flex flex-pj flex-ac mb15  inter-box">
                    <div>
                        <p>
                            <span class="ft17 c000" th:if="${orderPay!=null}" th:text="${'使用'+orderPay.WebConfig.finacename1}"></span><span class="ft10 cf70029">(抵扣)</span>
                        </p>
                        <!--<p th:if="${orderPay.inter<=0}"  class="ft10 c000 mt5">(当前您共有￥0.00)</p>-->
                        <p  class="ft10 c000 mt5" ><!--th:text="${'(当前您共有￥'++orderPay.WebConfig.finacename1+')'}"-->
                            <span>(当前您共有￥</span><span class="inter-sum" th:if="${orderPay!=null}" th:text="${#numbers.formatDecimal(orderPay.inter,1,2)}"></span><span th:if="${orderPay!=null}" th:text="${orderPay.WebConfig.finacename1}"></span><span>)</span>
                        </p>
                    </div>
                    <div class="inter-pay">
                        <!--消费积分与积分之和都为零-->
                        <!--<span th:if="${(orderPay.costinter+orderPay.inter)-(orderPay.order.realPay+orderPay.order.freight)==0}" class="ft17 cf70029 mr10"><i>-￥</i><i th:id="${'inter'+orderPay.order.orderId}">0.00</i></span>-->
                        <span  class="ft17 cf70029 mr10"><i>-￥</i><i class="inter-pay-total">0.00</i></span>
                        <!--两种积分之和大于支付金额-->
                        <!--<span th:if="${(orderPay.costinter+orderPay.inter)-(orderPay.order.realPay+orderPay.order.freight)>=0&&orderPay.costinter-(orderPay.order.realPay+orderPay.order.freight)<0}" class="ft17 cf70029 mr10"><i>-￥</i><i th:id="${'inter'+orderPay.order.orderId}"  th:text="${#numbers.formatDecimal((orderPay.order.realPay+orderPay.order.freight)-(orderPay.costinter), 1, 2)}"></i></span>-->
                        <!--两种积分之和小于支付金额-->
                        <!--<span th:if="${(orderPay.costinter+orderPay.inter)-(orderPay.order.realPay+orderPay.order.freight)<0&&orderPay.costinter<=0}" class="ft17 cf70029 mr10"><i>-￥</i><i th:id="${'inter'+orderPay.order.orderId}"  th:text="${#numbers.formatDecimal(orderPay.inter, 1, 2)}"></i></span>-->
                        <!--两种积分小于支付金额-->
                        <!--<span th:if="${(orderPay.costinter+orderPay.inter)-(orderPay.order.realPay+orderPay.order.freight)<0&&orderPay.costinter>0}" class="ft17 cf70029 mr10"><i>-￥</i><i th:id="${'inter'+orderPay.order.orderId}"  th:text="${#numbers.formatDecimal(orderPay.inter, 1, 2)}"></i></span>-->
                        <!--两种积分大于支付金额-->
                        <!--<span th:if="${orderPay.costinter-(orderPay.order.realPay+orderPay.order.freight)>=0&&orderPay.costinter!=0}" class="ft17 cf70029 mr10"><i>-￥</i><i  class="inter-pay-sum" th:id="${'inter'+orderPay.order.orderId}">0.00</i></span>-->

                        <!--<input class="inter-pay-input" type="checkbox" th:if="${orderPay.costinter-(orderPay.order.realPay+orderPay.order.freight)>0}"  name="let">-->
                        <!--<input type="checkbox" th:if="${orderPay.costinter-(orderPay.order.realPay+orderPay.order.freight)<0&&orderPay.costinter!=0&&orderPay.inter>0}"  name="let"   checked="checked" >-->
                        <!--<input type="checkbox" th:if="${orderPay.costinter==0&&orderPay.inter!=0}"  name="let">-->
                        <!--<input type="checkbox" th:if="${orderPay.costinter<=0&&orderPay.inter<=0}" name="let">-->
                        <input class="inter-pay-input" type="checkbox"  name="let">

                    </div>
                </li>
            </ul>
            <!--<p th:if="${(orderPay.costinter+orderPay.inter)<(orderPay.order.realPay+orderPay.order.freight)}" class="heigth45 ftr ft15 c323232">-->
            <p  class="heigth45 ftr ft15 c323232  web-bank-box  ">
                <span>需网银支付:</span>
                <span class="ft15 cf70029">
                    <i>￥</i><i class="web-bank-pay">0.00</i>
                    <!--<i th:id="${'cash'+orderPay.order.orderId}" th:text="${(orderPay.order.realPay+orderPay.order.freight)-(orderPay.costinter+orderPay.inter)}"></i>-->
                </span>
            </p>

        </div>
        <!--积分不够支付才显示微信支付-->
        <!--<div th:if="${(orderPay.costinter+orderPay.inter)<(orderPay.order.realPay+orderPay.order.freight)}" class="bgfff mt15 way">-->
        <div  class="bgfff mt15 way  weixin-pay">
            <p class="pl15 pr15 c646464 ft14 paytitle"><span class="ml20">支付方式</span></p>
            <!--微信支付-->
            <div class="flex flex-pj pl15 pr15 flex-ac payway">
                <img th:src="@{/shoppingApi/images/payway1.png}">
                <div class="it1 pr10 flex flex-ac flex-pj">
                    <span class="ft17 c323232 fl">微信支付</span>
                    <span>
                        <input class="fr mt15"  type="radio" id="weixin" name="payway">
                    </span>
                </div>
            </div>
            <!--&lt;!&ndash;积分支付&ndash;&gt;-->
            <!--<div class="flex flex-pj pl15 pr15 flex-ac payway">-->
            <!--<img th:src="@{/shoppingApi/images/my_wallet_integral.png}">-->
            <!--<div class="it1 pr10 flex flex-ac flex-pj">-->
            <!--<span class="ft17 c323232 fl">积分支付</span>-->
            <!--<span>-->
            <!--<input class="fr mt15" checked="checked" type="radio" id="JiFen" name="JiFen">-->
            <!--</span>-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="flex flex-pj pl15 pr15 flex-ac payway">-->
            <!--<img th:src="@{/shoppingApi/images/payway2.png}">-->
            <!--<div class="it1 pr10 flex flex-ac flex-pj">-->
            <!--<span class="ft17 c323232 fl">支付宝支付</span>-->
            <!--<span>-->
            <!--<input class="fr mt15" type="radio" name="payway">-->
            <!--</span>-->
            <!--</div>-->
            <!--</div>-->
        </div>
        <div class="fixedBox50">
            <div class="fixed-bottom ftc">
                <p  th:if="${orderPay!=null && orderPay.WebConfig.cashcouponmul!=0}"  class="ft14 cff0000 bgf8d598 heigth30"><i>该订单可返￥</i><i th:text="${#numbers.formatDecimal(orderPay.order.realPay*2, 1, 2)}"></i><i th:if="${orderPay!=null}" th:text="${orderPay.WebConfig.finacename3}"></i></p>
                <!--<p th:cash="${orderPay.order.orderId}" th:no="${orderPay.order.orderNo}" onclick="Pay();" id="pay" class="ft17 cfff bgf70029 heigth50">立即支付</p>-->
                <p  onclick="Pay();" id="pay" class="ft17 cfff bgf70029 heigth50 now-pay">正在支付请稍后</p>
            </div>
        </div>
    </div>
</div>
<!--<a class="back-user-btn" href="/wap/openUserCenter"><span>返回个人中心</span></a>-->
</body>
<script th:src="@{/shoppingApi/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{/shoppingApi/js/jquery-weui.min.js}"></script>
<script th:src="@{/shoppingApi/js/common.js}"></script>
<script type="application/javascript">
    var payWebCashs=0;
    var orderNo="";
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return encodeURIComponent(unescape(r[2]));
        return null;
    }
    $(function () {
        orderNo=$.trim($('.orderNo').val());
        payWebCashs=$.trim(parseFloat($('.web-bank-pay').html()));
        //alert(orderNo+"--"+payWebCashs);
        $.modal({
            title: "确认支付",
            text: "请确认微信支付是否完成",
            buttons: [
                { text: "支付遇到问题,重新支付", onClick: function(){
                        checkPay(orderNo,payWebCashs);
                } },
                { text: "已完成支付", className: "default", onClick: function(){
                        checkPay(orderNo,payWebCashs);
                } },
            ]
        });



        var id=$("#pay").attr("cash");
        var no=$.trim(getQueryString("No"));
    });

    function checkPay(orderNo1,payWebCashs1){
        var url = "/API/Weixin/H5CallbackQuery?No="+orderNo1+"&cash="+payWebCashs1;
        $.ajax({
            url: url,
            async:false,
            success: function(result) {
                if(result){
                    window.location="/wap/getOrderDetails?orderNo="+orderNo;
                }else {
                    window.location="/wap/getOrderList?orderStatus=701";
                }
            }
        });
    }
    pushHistory();
    window.addEventListener("popstate", function (e) {
        // alert("我监听到了事件啦"); //根据自己的需求实现自己的功能
        $.modal({
            title: "确认放弃付款吗",
            text: "未支付订单将在不久后关闭，请尽快支付哦~",
            buttons: [
                { text: "暂时放弃", onClick: function(){
                        window.location.href='/wap/getOrderList?orderStatus=701';//跳转
                    } },
                { text: "继续支付", className: "default",onClick: function(){
                        Pay();
                    } },
            ]
        });
        pushHistory(); //注，此处调用，可以用户一直停留着这个页面
    }, false);

    function pushHistory() {
        var state = {
            title: "title",
            url: "#"
        };
        window.history.pushState(state, "title", "#");
    }

    function getOrderState() {
        var url = "/API/Weixin/getOrder?out_trade_no="+orderNo+"&total_fee="+payWebCashs;
        $.ajax({
            url: url,
            // type: "GET",
            async:false,
            success: function(result) {
                if(result){
                    // alert("支付成功!!");
                    window.location="/wap/getOrderDetails?orderNo="+out_trade_no;
                }else{
                    setTimeout('getOrderState()',2000);//轮询执行，2s一次
                }
            }
        });
    }


    var payFlag=false;
    function Pay() {
        // var idNo = $.trim($('#pay').attr('cash'));//订单orderId
        // var costinter = $.trim($('#costinter' + idNo).html());//消费积分
        // var inter = $.trim($('#inter' + idNo).html());//积分
        // var cash = $.trim($('#cash' + idNo).html());//微信现金支付
        // var outtradeno=$.trim($('#pay').attr('no'));//订单号orderNo

        //获取支付的数据
        //订单号和订单ID
        var orderId=$('.orderId').val();
        if(orderId==""||orderId==null){
            return;
        }
        //查询该订单是否已经支付
        // $.ajax({
        //     url:'/wap/selectOrder',
        //     success:function (res) {
        //         console.log(res.payStatus);
        //         console.log(res.orderStatus);
        //     }
        // })

        //消费积分、积分、网银支付金额
        var payCostinter=$('.costinter-pay-total').html();
        var payInter=$('.inter-pay-total').html();
        var payWebCash=$('.web-bank-pay').html();

        //转换消费积分、积分、网银支付金额类型
        var payCostinters=$.trim(parseFloat(payCostinter));
        var payInters=$.trim(parseFloat(payInter));
        payWebCashs=$.trim(parseFloat(payWebCash)*100);
        if(payCostinters==0&&payInters==0&&payWebCash==0){return;}

        if(payWebCash==0.00){
            costinterAndInterPay(orderId,payCostinters,payInters,payWebCashs);//积分、消费积分支付
        }else{
            //costinterAndInterPay(orderId,payCostinters,payInters,0);//积分、消费积分支付
            var outtradeno=orderNo;
            weixinPay(outtradeno,payWebCash);//微信支付
        }

    }
    //消费积分和积分支付方式
    function costinterAndInterPay(idNo,costinter,inter,cash) {
        $.ajax({
            url: '/wap/pay',
            data: {
                id: idNo,
                costinter: -costinter,
                inter: -inter,
                cash: cash
            },
            dataType: 'json',
            contentType: 'application/json',
            async: false,
            success: function (data) {
                console.log(data);
                console.log("1");
                if (data.msgCode == "000000"){//支付成功！
                    //更新用户积分和消费积分以及折扣券
                    window.location="/wap/getOrderDetails?orderNo="+data.data;
                }else {//支付失败
                    $.toast('订单状态有误!！', 'cancel');
                }
            }
        });
    }

    //判断是否是微信浏览器的函数
    function isWeiXin(){
        //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
        var ua = window.navigator.userAgent.toLowerCase();
        //通过正则表达式匹配ua中是否含有MicroMessenger字符串
        if(ua.match(/MicroMessenger/i) == 'micromessenger'){
            return true;
        }else{
            return false;
        }
    }

    /*微信支付*/

    function  weixinPay(outtradeno,cash){
        if($("#weixin").prop("checked")){ //微信支付
            //setTimeout('getOrderState()',5000);//轮询执行，500ms一次
            var url = "/API/Weixin/downOrder?out_trade_no="+outtradeno+"&cash="+cash;
            if(isWeiXin()){
                window.location=url;
            }else {
                $.ajax({
                    url:url,
                    type: 'post',
                    dataType: 'json',
                    contentType: 'application/json',
                    async: false,
                    success: function(data){
                        if(data.msgCode=="2"){
                            window.location.href=data.detail;
                        }else if(data.msgCode=="-1"){
                            $.toast(data.detail, 'cancel');
                        }else {
                            $.toast('下单失败!', 'cancel');
                        }
                    }
                });
            }

        }
    }
    /*支付页面*/
    var total= $('.real-pay').html();//商品支付的总金额
    var totals=parseFloat(total);
    // alert(totals);
    /*支付的方式*/
    payWayflag=getCostInter(totals);

    //消费积分
    var payWayflag=false;
    function getCostInter(totalPayMoney) {
        //消费积分
        var userCostInter=$('.costinter-sum').html();
        var userCostInters=parseFloat(userCostInter);
        //积分
        var userInter=$('.inter-sum').html();
        var userInters=parseFloat(userInter);
        var web_bank_pay=$.trim(parseFloat($(".web-bank-pay").html()));
        // userCostInters=600.00;
        // userInters=600.00;
        if(userCostInters>=totalPayMoney&&userInters<totalPayMoney){//消费积分足够支付
            $('.costinter-pay-total').html(totalPayMoney.toFixed(2));
            // $('.costinter-input').attr('checked',true);
            $('.costinter-input').prop('checked',true);//只能选择消费积分
            $('.weixin-pay').hide();
            $('.inter-pay-input').prop('disabled',true);
            $('.inter-pay-input').css({"backgroundColor":"#f0f0f0"});
            /*如果选择积分支付*/
            $('.costinter-input').prop('disabled',true);
            $('.inter-pay-input').append("<style>.inter-pay-input::before{background:none}</style>");
            $('.inter-pay-input').css('background','#f0f0f0');
            $('.cost-inter').css('background','#CCCCCC');
            payWayflag=true;
        }else if(userCostInters<totalPayMoney && userInters<totalPayMoney && (userCostInters+userInters)>=totalPayMoney ){//两种积分之和够支付

            $('.costinter-pay-total').html(userCostInters.toFixed(2));
            $('.inter-pay-total').html(( totalPayMoney-userCostInters).toFixed(2));
            $('.costinter-input').prop('checked',true);
            $('.inter-pay-input').prop('checked',true);
            $('.weixin-pay').hide();
            payWayflag=true;
        }else if(userCostInters>=0&&userCostInters<totalPayMoney&&userInters>=totalPayMoney){//积分够支付
            $('.inter-pay-total').html(totalPayMoney.toFixed(2));
            $('.inter-pay-input').prop('checked',true);
            $('.weixin-pay').hide();
            $('.costinter-input').prop('disabled',true);
            $('.costinter-input').append("<style>.costinter-input::before{background:none}</style>");
            $('.costinter-input').css('background','#f0f0f0');
            $('.inter-box').css('background','#CCCCCC');
            payWayflag=true;
        }else if((userCostInters+userInters)<totalPayMoney){//两种积分之和都不够支付

            $('.costinter-pay-total').html(userCostInters.toFixed(2));
            $('.inter-pay-total').html(userInters.toFixed(2));
            $('.web-bank-pay').html((totalPayMoney-userCostInters-userInters).toFixed(2));
            $('.costinter-input').prop('checked',true);
            $('.inter-pay-input').prop('checked',true);
            payWayflag=true;
            $('#weixin').prop('checked',true);

        }else if(userInters>=totalPayMoney||userCostInters>=totalPayMoney){//两种积分中的一种都够支付
            $('.costinter-pay-total').html(totalPayMoney.toFixed(2));//默认消费积分支付
            $('.costinter-input').prop('checked',true);
            //选择积分支付
            $('.inter-pay-input').change(function () {
                if($('.inter-pay-input').prop('checked',true)){
                    $('.costinter-pay-total').html('0.00');//默认消费积分支付
                    $('.costinter-input').prop('checked',false);
                    $('.inter-pay-total').html(totalPayMoney.toFixed(2));
                    $('.inter-pay-input').prop('checked',true);
                }
            })

            //选择消费积分支付
            $('.costinter-input').change(function () {
                if($('.costinter-input').prop('checked',true)){
                    $('.costinter-pay-total').html(totalPayMoney.toFixed(2));//默认消费积分支付
                    $('.costinter-input').prop('checked',true);
                    $('.inter-pay-total').html('0.00');
                    $('.inter-pay-input').prop('checked',false);
                }
            })

            //隐藏微信支付
            $('.weixin-pay').hide();
            $('.web-bank-box').hide();
        }
        // else if(web_bank_pay>0){
        //     $('#weixin').prop('checked',true);
        // }
        return payWayflag;
    }


</script>
</html>